<script setup lang="ts">
import BaseButton from "@/coachfinder/components/ui/BaseButton.vue";
import BaseCard from "@/coachfinder/components/ui/BaseCard.vue";
import BaseSpinner from "@/coachfinder/components/ui/BaseSpinner.vue";
import { computed, ref, toRef } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter();
const route = useRoute();

const email = ref("");
const password = ref("");
const formIsValid = ref(true);
const mode = ref("login");
const isLoading = ref(false);
const error = computed(() => {
  let error = null;
  const er = store.getters.error;
  if (er && er.includes("Invalid login")) {
    error = "Please check your email and password.";
  } else if (er && er.includes("email not confirmed")) {
    error = "Please confirm your email.";
  }
  return error;
});

const submitButtonCaption = computed(() => {
  return mode.value === "login" ? "Login" : "Signup";
});

const switchButtonCaption = computed(() => {
  return mode.value === "login" ? "Signup instead" : "Login instead";
});

async function submitForm() {
  formIsValid.value = true;
  if (
    email.value === "" ||
    !email.value.includes("@") ||
    password.value.length < 6
  ) {
    formIsValid.value = false;
    return;
  }

  isLoading.value = true;
  if (mode.value === "login") {
    await store.dispatch("login", {
      email: email.value,
      password: password.value,
    });
  } else {
    await store.dispatch("signup", {
      email: email.value,
      password: password.value,
    });
  }

  if (!error.value) {
    const redirectUrl = "/" + (route.query.redirect || "coaches");
    router.replace(redirectUrl);
  }

  isLoading.value = false;
}
function switchAuthMode() {
  mode.value = mode.value === "login" ? "signup" : "login";
}
</script>

<template>
  <BaseCard>
    <form @submit.prevent="submitForm">
      <div class="form-control">
        <label for="email">E-mail</label>
        <input type="email" id="email" v-model.trim="email" />
      </div>
      <div class="form-control">
        <label for="password">Password</label>
        <input type="password" id="password" v-model.trim="password" />
      </div>
      <p v-if="!formIsValid">
        Please enter a valid email and password (at least 6 length)
      </p>
      <BaseButton>{{ submitButtonCaption }}</BaseButton>
      <BaseButton type="button" mode="flat" @click="switchAuthMode">{{
        switchButtonCaption
      }}</BaseButton>
    </form>
    <BaseSpinner v-if="isLoading"></BaseSpinner>
    <p v-if="error !== null">{{ error }}</p>
  </BaseCard>
</template>

<style scoped>
form {
  margin: 1rem;
  padding: 1rem;
}

.form-control {
  margin: 0.5rem 0;
}

label {
  font-weight: bold;
  margin-bottom: 0.5rem;
  display: block;
}

input,
textarea {
  display: block;
  width: 100%;
  font: inherit;
  border: 1px solid #ccc;
  padding: 0.15rem;
}

input:focus,
textarea:focus {
  border-color: #3d008d;
  background-color: #faf6ff;
  outline: none;
}
</style>
